<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>test</title>

	<style type="text/css">
	
	.test {
		color: red
	}

	.test2 {
		color: green
	}


	</style>
</head>
<body id="body_">
	MVVM第一个实例：
	<div id="NM_1">
		<input type="text" nc-value="user.name" onkeyup="console.log(this)"></input>
		{{user.name}}
	</div>
	MVVM第二个实例（与第一个实例互不影响）：
	<div id="NM_2">
		nc-value：
		<input type="text" nc-value="userName"></input>
		{{userName}}
		<input type="text" nc-value="userName"></input>
		<input type="text" nc-value="age"></input>
		<br/>

		nc-src：
		<img style="width: 15px;height: 15px;" nc-src="https://github.com/DongyuCai/Axe/raw/branch-jdk1.7/axe/{{imgName}}"></img>
		<br/>

		nc-text：
		<span nc-text="{{userName+'最棒'}}...!"></span>
		<br/>

		nc-for和$index：
		<span nc-for="item in userName.split(',')" nc-text="{{item.$index+1}}、{{item}} "></span>
		<br/>
	
		nc-if：
		<span nc-if="userName.split(',').length > 1">多个</span>
		<span nc-if="userName.split(',').length <= 1">单个</span>
		<br/>

		过滤器：
		<span nc-text="{{userName|uppercaseFilter}}"></span>---
		<span nc-text="{{sex|infoFilter:userName,age}}"></span>
		<br/>
		
		渲染监听：
		$onload(function(){...});
		<br/>

		变量监控：
		$watch('field1',function(field1){...});
		<br/>
		$watch(['field1','field2'...],function(field1,field2...){...});
		<br/>

		修改元素表面值
		<input id="input_2" type="text" nc-value="age"></input><button type="button" onclick="changeInputVal()">change</button>
		<br/>
		<a href="历史的/test.html">跳转</a>
	</div>


</body>
<script type="text/javascript" src="shadow.js"></script>
<script type="text/javascript">
	//新建MVVM实例
	var NM_1 = $SHADOW('NM_1');
	$scope1 = NM_1.$scope;//拿到数据绑定对象
	$scope1.user = new Object();
	NM_1.$init();//初始化MVVM
	
	//新建MVVM实例，可以只写id
	var NM_2 = $SHADOW('NM_2');
	$scope2 = NM_2.$scope;//拿到数据绑定对象
	$scope2.userName = '张三ZhangSan,李四LiSi';
	$scope2.age = 1;
	$scope2.sex = '男';
	$scope2.imgName = 'favicon.png';

	NM_2.$onload(function(){
		console.log('渲染完毕');//渲染完毕会触发，页面动作触发渲染，也会执行。
	});

	NM_2.$watch(['userName','age'],function(userName,age){
		//如果userName发生修改，age发生修改，会检测到并触发，如果只有一个检测值，可以不写数组直接'userName'字符串。
		console.log('检测到值的改变：'+userName+"--"+age);
		if($scope2.userName.length > 5){
			$scope2.userName = $scope2.userName.substring(0,5);
		}
		NM_2.$apply('userName');
	});

	NM_2.$init();//初始化MVVM

	//大写转换器
	function uppercaseFilter(userName,$scope){
		//过滤器符号|前的表达式计算值，作为第一个参数接受。
		//$scope是额外框架会传给过滤器的参数，永远放在最后一个位置，可以不接。
		console.log("过滤器：uppercaseFilter");
		console.log($scope);
		return userName.toUpperCase();//转成大写
	}

	//信息过滤器，带多个参数
	function infoFilter(sex,userName,age){
		//过滤器符号|前的表达式计算值，作为第一个参数接受。
		//age,sex是额外的两个参数
		//$scope是额外框架会传给过滤器的参数，永远放在最后一个位置，可以不接。
		return '年龄'+age+'岁，性别'+sex;//转成大写
	}

	function changeInputVal(){
		document.getElementById("input_2").value = 2;
		document.getElementById("input_2").onchange();
	}
</script>


</html>